<script setup lang="ts">
import { useIsActivated } from '@peng_kai/kit/vue/hooks/useIsActivated';

defineOptions({
  inheritAttrs: false,
});
const props = defineProps<{
  footerClass?: string;
}>();

const activated = useIsActivated();
const $modalContent = ref<HTMLElement>();
const $modalFooter = document.createElement('div');
$modalFooter.classList.add('ant-modal-footer');

watch(toRef(props, 'footerClass'), (newVal, oldVal) => {
  if (oldVal) {
    $modalFooter.className.replace(oldVal, '');
  }

  if (newVal) {
    $modalFooter.className += ` ${newVal}`;
  }
}, { immediate: true });

onMounted(() => {
  const ins = getCurrentInstance();
  let parentEle: HTMLElement | null = ins?.vnode.el?.parentElement;

  while (!$modalContent.value && parentEle) {
    if (parentEle.classList.contains('ant-modal-content')) {
      $modalContent.value = parentEle;
    }
    else {
      parentEle = parentEle.parentElement;
    }
  }

  $modalContent.value?.appendChild($modalFooter);
});
</script>

<template>
  <Teleport v-if="$modalContent && activated" :to="$modalFooter">
    <slot />
  </Teleport>
</template>
